<template>
	<view class="detail-page">

		<!-- 通知详情内容 -->
		<scroll-view class="detail-content" scroll-y>
			<view class="detail-container">
				<text class="detail-title">{{ notification.title }}</text>

				<view class="detail-meta">
					<text class="detail-time">{{ formatFullTime(notification.time) }}</text>
				</view>

				<view class="detail-divider"></view>

				<view class="detail-body">
					<text class="body-text">{{ notification.content }}</text>

					<!-- 可能的附加内容 -->
					<view class="detail-attachment" v-if="notification.hasAttachment">
						<view class="attachment-title">
							<image src="/static/icons/attachment.png" class="attachment-icon" mode="aspectFit" />
							<text class="attachment-text">相关附件</text>
						</view>
						<view class="attachment-list">
							<view class="attachment-item" v-for="(file, index) in notification.attachments"
								:key="index">
								<image src="/static/icons/file.png" class="file-icon" mode="aspectFit" />
								<text class="file-name">{{ file.name }}</text>
								<image src="/static/icons/download.png" class="download-icon" mode="aspectFit"
									@click.stop="downloadFile(file.url)" />
							</view>
						</view>
					</view>
				</view>
			</view>

 
		</scroll-view>

	 
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		reactive
	} from 'vue';

	// 通知数据
	const notification = ref({
		id: '',
		title: '',
		brief: '',
		content: '',
		time: '',
		read: false,
		hasAttachment: false,
		attachments: []
	});

	// 弹窗状态
	const showDeleteModal = ref(false);

	// 页面加载时获取通知详情
	onMounted(() => {
		// 获取页面参数
		const pages = getCurrentPages();
		const currentPage = pages[pages.length - 1];
		const notifyId = currentPage.options.id || '';

		// 获取通知详情
		fetchNotificationDetail(notifyId);
	});

	// 获取通知详情数据
	const fetchNotificationDetail = (id) => {
		// 模拟API请求
		setTimeout(() => {
			// 根据ID生成不同的模拟数据
			let content = '';
			let hasAttachment = false;
			let attachments = [];

			if (id.includes('1')) {
				// 系统维护通知
				content =
					'亲爱的用户，为了提供更好的服务，我们将于2024年10月15日00:00-06:00进行系统维护。维护期间，部分功能可能无法正常使用，请您提前做好准备。给您带来的不便，敬请谅解。\n\n维护期间如有紧急问题，请联系客服热线：400-123-4567。\n\n感谢您的理解与支持！';
			} else if (id.includes('2')) {
				// 新功能上线公告
				content =
					'尊敬的用户，我们很高兴地宣布，平台已于2024年10月10日完成更新，新增了以下功能：\n\n1. 新增消息推送功能，重要通知将及时推送给您\n2. 优化了订单管理界面，操作更便捷\n3. 增加了数据统计功能，助您了解使用情况\n4. 修复了已知问题，提升系统稳定性\n\n欢迎体验新功能，如有任何建议，请随时反馈给我们。';
				hasAttachment = true;
				attachments = [{
						name: '新功能使用说明.pdf',
						url: '/files/guide.pdf'
					},
					{
						name: '操作演示视频.mp4',
						url: '/files/demo.mp4'
					}
				];
			} else {
				// 默认通知内容
				content =
					'这是一条系统通知的详细内容。在这里可以展示完整的通知信息，包括各种格式的文本内容。\n\n通知可能包含多条信息，例如：\n1. 重要通知事项\n2. 时间安排\n3. 操作指引\n4. 注意事项\n\n请仔细阅读以上内容，如有疑问，请联系客服咨询。';
			}

			// 填充数据
			notification.value = {
				id,
				title: id.includes('1') ? '系统维护通知' : id.includes('2') ? '新功能上线公告' : '系统通知',
				brief: id.includes('1') ? '系统将于今晚进行维护，届时可能无法正常使用' : id.includes('2') ?
					'我们新增了多项实用功能，快来体验吧' : '这是一条系统通知的简要内容...',
				content,
				time: new Date(Date.now() - Math.floor(Math.random() * 7 * 86400000)).toISOString(),
				read: id.includes('3') || id.includes('4'), // 部分通知默认已读
				hasAttachment,
				attachments
			};
		}, 500);
	};

	// 格式化完整时间
	const formatFullTime = (timeStr) => {
		const date = new Date(timeStr);
		return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日 ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
	};

 
	// 下载文件
	const downloadFile = (url) => {
		uni.showToast({
			title: '开始下载...',
			icon: 'none',
			duration: 1500
		});

		// 实际项目中这里会调用 uni.downloadFile 等API
		console.log('下载文件:', url);
	};

 
</script>

<style scoped>
	.detail-page {
		background-color: #f5f7fa;
		min-height: 100vh;
	}

	/* 导航栏样式 */
	.navbar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 24rpx;
		background-color: #ffffff;
		border-bottom: 1rpx solid #eeeeee;
	}

	.back-btn {
		width: 40rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.back-icon {
		width: 24rpx;
		height: 24rpx;
	}

	.nav-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #1d2129;
		flex: 1;
		text-align: center;
	}

	.delete-btn {
		width: 80rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.delete-text {
		font-size: 28rpx;
		color: #f53f3f;
	}

	/* 详情内容样式 */
	.detail-content {
		min-height: calc(100vh - 90rpx);
	}

	.detail-container {
		background-color: #ffffff;
		margin: 20rpx;
		border-radius: 16rpx;
		padding: 30rpx 24rpx;
	}

	.detail-title {
		font-size: 34rpx;
		font-weight: 600;
		color: #1d2129;
		line-height: 1.5;
		margin-bottom: 24rpx;
		display: block;
	}

	.detail-meta {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24rpx;
	}

	.detail-time {
		font-size: 24rpx;
		color: #86909c;
	}

	.read-tag {
		background-color: #f0f2f5;
		border-radius: 14rpx;
		padding: 4rpx 16rpx;
	}

	.read-text {
		font-size: 22rpx;
		color: #86909c;
	}

	.detail-divider {
		height: 1rpx;
		background-color: #f2f3f5;
		margin-bottom: 30rpx;
	}

	.detail-body {
		padding-bottom: 20rpx;
	}

	.body-text {
		font-size: 28rpx;
		color: #4e5969;
		line-height: 1.8;
		white-space: pre-line;
	}

	/* 附件样式 */
	.detail-attachment {
		margin-top: 40rpx;
		padding-top: 30rpx;
		border-top: 1rpx dashed #f2f3f5;
	}

	.attachment-title {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.attachment-icon {
		width: 28rpx;
		height: 28rpx;
		margin-right: 12rpx;
	}

	.attachment-text {
		font-size: 26rpx;
		color: #1d2129;
		font-weight: 500;
	}

	.attachment-list {
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}

	.attachment-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 16rpx 20rpx;
		background-color: #f5f7fa;
		border-radius: 10rpx;
	}

	.file-icon {
		width: 32rpx;
		height: 32rpx;
		margin-right: 16rpx;
	}

	.file-name {
		flex: 1;
		font-size: 24rpx;
		color: #4e5969;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.download-icon {
		width: 28rpx;
		height: 28rpx;
		color: #2c6ecb;
	}

	/* 底部操作栏 */
	.action-bar {
		padding: 20rpx;
		background-color: #ffffff;
		border-top: 1rpx solid #eeeeee;
	}

	.read-btn {
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		background-color: #2c6ecb;
		color: #ffffff;
		font-size: 30rpx;
		border-radius: 12rpx;
		border: none;
	}

	/* 删除确认弹窗 */
	.modal-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 999;
	}

	.modal-container {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #ffffff;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		padding: 30rpx 24rpx;
		z-index: 1000;
		animation: slideUp 0.3s ease;
	}

	@keyframes slideUp {
		from {
			transform: translateY(100%);
		}

		to {
			transform: translateY(0);
		}
	}

	.modal-content {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.modal-title {
		font-size: 34rpx;
		font-weight: 600;
		color: #1d2129;
		margin-bottom: 20rpx;
	}

	.modal-message {
		font-size: 28rpx;
		color: #4e5969;
		text-align: center;
		margin-bottom: 40rpx;
		line-height: 1.6;
		padding: 0 20rpx;
	}

	.modal-buttons {
		display: flex;
		width: 100%;
		gap: 20rpx;
	}

	.modal-btn {
		flex: 1;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 30rpx;
		border-radius: 12rpx;
		border: none;
	}

	.cancel-btn {
		background-color: #f2f3f5;
		color: #4e5969;
	}

	.confirm-btn {
		background-color: #f53f3f;
		color: #ffffff;
	}
</style>